<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .fs{
            font-size:20px;
        }
        .fc{
            color:greenyellow;
        }
        .bc{
            background-color:#ccc;
        }
        .border{
            border:1px solid black;
        }
        body{
            margin-bottom:500px;
        }
        .success{
            color:green;
        }
        .error{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p style="color:greenyellow;background-color:#ccc;">传统style样式绑定</p>
        <p :style="'color:'+color+';background-color:#ccc;'">绑定style样式</p>
        <p :style=" styleStr ">绑定style样式</p>
        <p :style="'color:greenyellow;background-color:#ccc;'">绑定style样式</p>
        <p :style="`color:yellow;background-color:#ccc;`">绑定style样式</p>
        <p :style="`color:${color};background-color:#ccc;`">绑定style样式</p>
        <input type="button" value="切换颜色" @click="color='blue'">
        <input type="color" @change="changeColor($event.target.value)">
        <hr>
        <p :style="{color:'greenyellow','background-color':'#ccc'}">绑定style-object样式</p>
        <p :style="styleObj">绑定style-object样式</p>
        <input type="button" value="切换颜色" @click="styleObj.color='blue'">
        <input type="button" value="切换颜色" @click="styleObj.backgroundColor='black'">
        <input type="color" @change="styleObj.color=$event.target.value">
        <input type="color" @change="styleObj.backgroundColor=$event.target.value">
        <hr>
        <p :style="styleArr">绑定style-array样式</p>
        <p :style="[styleFc,styleFs,styleBc]">绑定style-array样式</p>
        <hr>
        <p class="fs fc bc border">传统class样式定义</p>
        <p :class=" 'fs fc bc border' ">传统class样式定义</p>
        <p :class=" classStr ">传统class样式定义</p>
        <input type="button" value="添加样式" @click="classStr=classStr+' border'">
        <input type="button" value="添加样式" @click.once="classStr=classStr+' border'">
        <input type="button" value="删除样式" @click="removeClass()">
        <hr>
        <p :class="['fs','fc','bc']">绑定class-array样式</p>
        <p :class=" classArr ">绑定class-array样式</p>
        <input type="button" value="添加样式" @click="classArr.push('border')">
        <!-- <input type="button" value="添加样式" @click="classArr.add('border')"> -->
        <input type="button" value="删除样式" @click="removeArr()">
        <hr>
        <p :class="{fs:true,fc:true,bc:true,border:true}">绑定class-object样式</p>
        <p :class="classObj">绑定class-object样式</p>
        <input type="button" value="改变字体大小属性" @click="classObj.fs=!classObj.fs">
        <input type="button" value="改变字体颜色属性" @click="classObj.fc=!classObj.fc">
        <input type="button" value="改变背景颜色属性" @click="classObj.bc=!classObj.bc">
        <input type="button" value="改变边框属性" @click="classObj.border=!classObj.border">
        <hr>
        <p>msg:{{msg}}</p>
        <input type="text" @input="msg=$event.target.value" :class="msg.length>=6&&msg.length<10?'success':'error'">
        <span :class="'success'" v-show="msg.length>=6&&msg.length<10">符合规则!</span>
        <span :class="['error']" v-show="msg.length<6||msg.length>=10">输入字符必须大于等于6位并且小于10位!</span>
        <input type="text" @input="msg=$event.target.value" :class="{'success':msg.length>=6&&msg.length<10,'error':msg.length<6||msg.length>=10}">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                styleStr:"color:greenyellow;background-color:#ccc;",
                color:"greenyellow",
                styleObj:{
                    color:"greenyellow",
                    backgroundColor:"#ccc",
                    borderBottom:"1px solid yellow"
                },
                styleArr:[
                    {
                        color:"yellow",
                        fontSize:"20px"
                    },
                    {
                        backgroundColor:"#ccc"
                    }
                ],
                styleFc:{
                    color:"blue"
                },
                styleFs:{
                    fontSize:"20px"
                },
                styleBc:{
                    "background-color":"yellow"
                },
                classStr:"testfs fs fc bc",
                classArr:["testfs","fs","fc","bc"],
                // classArr:new Set(["testfs","fs","fc","bc"])
                classObj:{
                    fs:false,
                    fc:true,
                    bc:false,
                    border:true
                },
                msg:""
            },
            methods:{
                changeColor(e){
                    this.color=e;
                },
                removeClass(){
                    // this.classStr=this.classStr.replace("fs","");
                    this.classStr=this.classStr.replace(/fs/g,"");
                },
                removeArr(){
                    let i=this.classArr.indexOf("fs");
                    this.classArr.splice(i,1);
                }
            }
        })
    </script>
</body>
</html>